import React, { PureComponent } from 'react'
import PropTypes from "prop-types"
import {
  Form,
  Input
} from 'antd/lib/index'

const Item = Form.Item

// 添加分类的组件
class AddForm extends PureComponent {
  static propTypes = {
    setForm: PropTypes.func.isRequired, // 用来传递 form 对象的函数
  }

  componentWillMount () {
    // 将 from对象通过 setForm() 传递给父组件
    this.props.setForm(this.props.form)
  }

  render () {
    const { getFieldDecorator } = this.props.form

    const formItemLayout = {
      labelCol: { // 左侧 label 的宽度
        xs: { span: 24 },
        sm: { span: 6},
      },
      wrapperCol: { // 右侧包裹的宽度
        xs: { span: 24 },
        sm: { span: 16 },
      },
    }

    return (
      <Form onSubmit={this.handleSubmit}>
        <Item label='角色名称' {...formItemLayout}>
          {
            getFieldDecorator('roleName', {
              initialValue: '',
              rules: [
                { required: true, message: '角色名称必须输入' }
              ]
            })(
              <Input placeholder='请输入角色名称' />
            )
          }
        </Item>
      </Form>
    )
  }
}

export default Form.create()(AddForm)
